<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css">
</head>

<body>

    <div class="product_imgs">
        <div class="product_main_img">
            <img id="product_main_img" src="./imgs/1.jpg" alt="">
        </div>
        <div class="product_main_thumbs">
            <div class="product_main_thumb">
                <img data-thumb src="./imgs/1.jpg" alt="">
            </div>
            <div class="product_main_thumb">
                <img data-thumb src="./imgs/2.jpg" alt="">
            </div>
            <div class="product_main_thumb">
                <img data-thumb src="./imgs/3.jpg" alt="">
            </div>
            <div class="product_main_thumb">
                <img data-thumb src="./imgs/4.jpg" alt="">
            </div>
            <div class="product_main_thumb">
                <img data-thumb src="./imgs/5.jpg" alt="">
            </div>
        </div>
    </div>
    <script>
        const mainImg = document.getElementById('product_main_img');
        document.onmousemove = function (e) {
            const target = e.target;
            const thumb = target.dataset.thumb;
            if (thumb !== undefined) {
                // console.log(target);
                mainImg.src = target.src;
            }
        }
    </script>

</body>

</html>